 <!-- 
 @Author: Havery   
 @Date: 2021-01-11 13:58:16   
 @function:按钮管理修改
----------------------------------------------------------  
 @Last Modified by:   LC-2021-01-11 13:58:16  
 @Modified function:xxx 
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form
      label-width="120px"
      ref="modifyInfo"
      :rules="formInfoRules"
      :model="formInfo"
    >
      <el-row>
        <!-- 基本信息 -->
        <el-col :span="24">
          <el-form-item label="名　　称：" prop="name">
            <el-input
              size="mini"
              v-model="formInfo.name"
              placeholder="名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理人员：" prop="managername">
            <el-input v-model="formInfo.managername" size="mini" readonly>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-picture-outline"
                slot="append"
                @click="selectManager()"
                >选择人员</el-button
              >
            </el-input>
          </el-form-item>

          <el-form-item label="分　　类：" prop="flow_category">
             <el-select v-model="formInfo.flow_category"  style="width: 100%" size="mini" >
              <el-option
                v-for="item in listTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="排　　序：" prop="sort">
            <el-input
              size="mini"
              type="number"
              v-model="formInfo.sort"
            ></el-input>
          </el-form-item>
          <el-form-item label="对应表单：" prop="form_key">
            <el-input
              size="mini"
              v-model="formInfo.form_key"
              placeholder="对应表单名称"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="备注说明：" prop="remarks">
            <el-input
              v-model="formInfo.remarks"
              size="mini"
              type="textarea"
              rows="4"
              maxlength="255"
              show-word-limit
              placeholder="备注说明"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm('modifyInfo')"
        >保存</el-button
      >
    </div>
    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      width="40%"
      :modal="false"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <SelectUserForm
        v-bind:formInfo="formInfo"
        @callBack="callBack"
      ></SelectUserForm>
    </el-dialog>
  </div>
</template>
<script>
import FlowInfoHttp from "@/api/flow/flowInfo"; //http
import SelectUserForm from "./common/selectuser"; //用户部门-组件
//定义变量
const {
  save, //获取分页列表
  loadTypeList, //获取所有类型列表
} = FlowInfoHttp;
export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  props: ["formInfo"], //父界面v-bind:editInfo一致
  components: {
    SelectUserForm,
  },
  data() {
    return {
      //应用类型
      listTypeData: [],
      //验证对象，由Rules结尾
      formInfoRules: {
        name: [
          {
            required: true,
            min: 1,
            max: 25,
            message: "名称不能为空且最大不超过25位",
            trigger: "blur",
          },
        ],
        flow_category: [
          {
            required: true,
            message: "分类不能为空",
            trigger: "blur",
          },
        ],
        form_key: [
          {
            required: true,
            message: "对应表单名称不能为空",
            trigger: "blur",
          },
        ],
        
      },
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
      },
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
    this.loadTypeList();
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {},
  methods: {
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
    //保存信息
    submitForm(modifyRef) {
      this.$refs[modifyRef].validate((valid) => {
        if (valid) {
          save(this.formInfo).then((response) => {
            let data = response.data;
            if (data.Code === 1000) {
              this.$messageTip.success(data.Msg); 
              this.$emit("callBack", data);
            } else {
              this.$messageTip.warning(data.Msg); 
            }
          });
        } else {
          return false;
        }
      });
    },
    //获取分类
    loadTypeList() {
      loadTypeList().then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listTypeData=data.Data;
        } else {
           this.$messageTip.warning(data.Msg); 
        }
      });
    },

    //选择标签回调
    callBack(info) {
      this.formInfo.managername = "";
      this.formInfo.manager = "";
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.formInfo.managername = info.info.label;
        this.formInfo.manager = info.info.id;
      }
    },
    //选择管理人员
    selectManager() {
      this.editForm.formVisible = true;
      this.editForm.formTitle = "选择管理人员";
    },
    //选择实例管理人员
    selectinstance() {
      this.editForm.formVisible = true;
      this.editForm.formTitle = "选择实例管理人员";
    },
  },
};
</script>